<!-- 入座后扫码下单 -->
<template>
    <view class="content bgF5" :style="{'--color': color}">
        <view class="p-re" :style="{height: contentBox + 'px'}">
            <!-- :style="{backgroundImage: 'url(' + $imgUrls(storeInfo.logo) + ')'}" -->
            <view class="rows bgwhite">
                <view class="rows">
                    <view class="rows" :style="{height: System.statusBarHeight + 'px'}"></view>
                    <view class="row a-center p-left30" :style="{width: `${navWidth}px`, height: `${navHeight}px`}">
                        <!-- 返回、搜索 -->
                        <view class="fcBtn d-flex a-center">
                            <view class="flex-1 flexac">
                                <text class="iconfont icon-shouyeT211 color_66 bold" v-if="fromShare == 1" @click="backHome()"></text>
                                <text class="iconfont icon-xiangzuo color_66" v-else @click="back()"></text>
                            </view>
                            <u-line direction="column" :hairline="false" length="16"></u-line>
                            <view class="flex-1 flexac">
                                <text class="iconfont icon-wodedingdanjiluT1 size36" :style="{color: order_id == 0 ? '#666' : color}" @click="toOrderDetail"></text>
                            </view>
                            <!-- <view class="flex-1 flexac" @click="toUrl('/pages/classify/searchMode')">
                                <view class="iconfont icon-btn_search color_66 bold"></view>
                            </view> -->
                        </view>
                        <view class="flex-1 size32 black bold text-center">扫码点餐</view>
                    </view>
                </view>
                <view class="viewbox auto d-flex j-sb a-center position">
                    <view class="flex-1 m-right20">
                        <view class="size32 black bold d-flex">
                            <!-- <image :src="$imgUrls(tableInfo.image)" mode="aspectFill" class="logo m-right10" v-if="tableInfo.image"></image> -->
                            桌号：{{ tableInfo.name || '无' }}
                        </view>
                        <view class="ellipsis m-top10" v-if="storeInfo">
                            <text class="size26 black">{{storeInfo.name}} </text>
                            <text class="size26 color_66">({{storeInfo.address}})</text>
                        </view>
                    </view>
                    <view class="way">
                        <text class="iconfont icon-kefu1 size40" @click="handleCall" v-if="tableInfo.storeInfo.callService == 1"></text>
                    </view>
                </view>
            </view>

            <view class="scrollView m-top20 d-flex" :style="{height: scrollView + 'px'}">
                <scroll-view scroll-y :scroll-into-view="`Left${LeftIndex}`" scroll-with-animation class="Left height">
                    <view class="leftList size26 color_66 ellipsis" :class="{'navActive':LeftIndex == index}" :id="`Left${index}`"
                        v-for="(item,index) in pageData" :key="index" @click="navTab(index)">{{item.classify_name}}
                    </view>
                </scroll-view>
                <scroll-view scroll-y class="Right flex-1 height m-left10 m-right20" :scroll-top="scrollTop" @scroll="RightScroll">
                    <view class="RightData bgwhite m-bot20" :id="`Right${index}`" v-for="(item,index) in pageData" :key="index">
                        <image :src="$imgUrls(item.classify_atlas)" mode="widthFix" class="Top_bg" v-if="item.classify_atlas"></image>
                        <view class="rows padding20">
                            <view class="size30 color_33">{{item.classify_name}}</view>
                            <view class="h6 color_99 m-top10">{{item.classify_info}}</view>
                        </view>
                        <view class="rows padding10-20" v-if="item.goods">
                            <view class="list width p-bot30 d-flex" v-for="(subItem,subIndex) in item.goods" :key="subIndex"
                                @click="toUrl(`/pages/goods/goods_detail?goods_id=${subItem.goods_id}&mode=1&scan=1&tid=${tid}`)">
                                <image :src="$imgUrls(subItem.img)" mode="aspectFill" class="shop_img"></image>
                                <view class="flex-1 p-top10 m-left20">
                                    <view class="size32 color_33 bold">{{subItem.name}}</view>
                                    <view class="h6 color_99 ellipsis m-top12">{{subItem.info}}</view>
                                    <view class="row j-sb m-top40">
                                        <view>
                                            <text class="size30 color_E9 bold">￥{{subItem.price}}</text>
                                            <!-- <text class="h6 color_99 line-through m-left10" v-if="subItem.price < subItem.full_price">￥{{subItem.full_price}}</text> -->
                                        </view>
                                        <view class="d-flex a-center">
                                            <!-- carNum：所选规格数量、goodsNum：商品总数、无规格时相等 -->
                                            <text class="iconfont icon-jianshao1 size42" @click.stop="handleDel(subItem)" v-if="subItem.carNum > 0"></text>
                                            <view class="amount size26 color_33 text-center" v-if="subItem.carNum > 0">{{subItem.goodsNum}}</view>
                                            <text class="iconfont icon-zengjia size42" @click.stop="handleAdd(subItem)"></text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="rows botBox h7 color_99 text-center" v-if="pageData.length">我是有底线的~</view>
                </scroll-view>
            </view>

            <view class="CartBtn Settle p-ab flexac size30 white bold300 t-letter4" v-if="!cartList.length && !tid" @click="settlement">入座后扫码下单</view>
            <view class="CartView p-ab bgwhite p-left30 d-flex a-center" v-if="cartList.length" @click="showCartList = !showCartList">
                <view class="CartIcon p-re">
                    <view class="iconfont icon-gouwuche size50 color_66"></view>
                    <view class="Cartnum flexac p-ab size16 white">{{ allNum }}</view>
                </view>
                <view class="m-left40">
                    <view class="size28 color_33 bold400">合计:</view>
                    <view class="color_E9">
                        <text class="h7">￥</text>
                        <text class="size28 bold400">{{allPrice}}</text>
                    </view>
                </view>
                <view class="Settle height p-left40 p-right40 size26 white j-self-end flexac"
                    :class="{'bgB3': !allNum && tid}" @click.stop="settlement">{{ tid ? '去结算' : '入座扫码' }}</view>
            </view>

            <view class="Controls wh d-flex a-end" v-if="showCartList && cartList.length" @click="showCartList = false">
                <view class="botPop width bgwhite bor_radius_top10" @click.stop>
                    <view class="row j-sb padding30 bot">
                        <view class="size26 color_33 bold">已选商品({{allNum}}件)</view>
                        <view class="d-flex a-center" @click="clearCart">
                            <view class="iconfont icon-shanchu2 size28 color_99"></view>
                            <text class="size26 color_99 m-left10">清空购物车</text>
                        </view>
                    </view>
                    <view class="swipe-action">
                        <uni-swipe-action>
                            <block v-for="(item,index) in cartList" :key="index">
                                <uni-swipe-action-item :right-options="rightoptions" @click="actionItem($event, item)">
                                    <view class="row padding20-30">
                                        <image :src="$imgUrls(item.goodsImg)" mode="aspectFill" class="shop_img f-shrink-0"></image>
                                        <view class="flex-1 m-left20">
                                            <view class="size32 color_33 bold ellipsis">{{item.goods_name}}</view>
                                            <view class="h6 color_99 ellipsis m-top10">{{item.operation_text}}</view>
                                            <view class="row j-sb a-center m-top20">
                                                <view class="d-flex a-center">
                                                    <view class="d-flex a-center color_E9 bold">
                                                        <text class="h7">￥</text>
                                                        <text class="size30">{{item.price}}</text>
                                                    </view>
                                                    <text class="h6 color_66 bold400 line-through m-left10" v-if="item.price < item.goodsOneOldPrice">￥{{item.goodsOneOldPrice}}</text>
                                                </view>
                                                <view class="d-flex a-center">
                                                    <text class="iconfont icon-jianshao1 size40" @click="delBtn(item.car_id)"></text>
                                                    <view class="amount size26 color_33 text-center">{{item.num}}</view>
                                                    <text class="iconfont icon-zengjia size40" @click="addBtn(item.car_id)"></text>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </uni-swipe-action-item>
                            </block>
                        </uni-swipe-action>
                    </view>
                </view>
            </view>
        </view>

        <!-- 规格弹框 -->
        <u-popup :show="showPopup" :round="10" mode="center" closeable @close="showPopup = false">
            <view class="specsPop viewboxs p-top20 d-flex f-column">
                <view class="size36 bold padding40">{{ currItem.name }}</view>
                <view class="list flex-1 p-left40 p-right40">
                    <view class="m-bot20" v-for="(item,index) in currItem.getGoodsSpecs.specsList" :key="index">
                        <view class="size28 bold m-bot20">{{ item.title }}</view>
                        <view class="d-flex f-wrap">
                            <view class="specsTag text-center size26 color_33 bor_radius_6" v-for="(itm,idx) in item.list" :key="idx"
                                :class="{'active': currItem.specs_ids[index] == itm.specs_id, 'color_cc': !itm.state}"
                                @click="handleSpecs(index,itm.state,itm.specs_id)">{{ itm.title }}</view>
                        </view>
                    </view>
                </view>
                <view class="line padding20-40 size26 color_33">已选规格：{{ currItem.currSpecs.specs_title }}</view>
                <view class="footer padding40 d-flex j-sb a-center">
                    <view class="color_E9 bold">
                        <text class="size28">￥</text>
                        <text class="size40">{{ currItem.currSpecs.price || currItem.price }}</text>
                    </view>
                    <view class="d-flex a-center" v-if="counter">
                        <text class="iconfont icon-jianshao1 size40" @click="delBtn(counter.car_id)"></text>
                        <view class="amount size26 color_33 text-center">{{counter.num}}</view>
                        <text class="iconfont icon-zengjia size40" @click="addBtn(counter.car_id)"></text>
                    </view>
                    <view class="botBtn bor_radius_10 flexac size28 white t-letter4" @click="handleSubmit" v-else>加入购物车</view>
                </view>
            </view>
        </u-popup>

        <showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
    </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data(){
        return {
            fromShare: 0,
            tid: '', // 桌号id
            order_id: 0, // 待支付的订单id, 0则无订单
            tableInfo: '',
            pageData: [],
            storeInfo: '',
            cartList: [],
            showModal: false, // 授权登录
            showPopup: false,
            showCartList: false,
            contentBox: 0,
            scrollView: 0,
            LeftIndex: 0,
            scrollTop: 0,
            rightoptions: [{
                text: '删除',
                style: { backgroundColor: '#f56c6c'}
            }], 
            currItem: '',
            specsCopy: '', // 原始规格数据字符串
            counter: '',
            timer: null,
            flag: true // 是否触发onShow
        }
    },
    computed: {
        ...mapState(['vid','color', 'System', 'navWidth', 'navHeight', 'totalHeight']),
        allNum(){
            let num = 0
            this.cartList.forEach(item=>{
                num += parseInt(item.num)
            })
            return num
        },
        allPrice(){
            let price = 0
            this.cartList.forEach(item=>{
                price += item.price * item.num
            })
            return price.toFixed(2)
        },
        incCount(){ // 当前商品某规格是否被加购
            if(!this.currItem) return
            let empty = this.currItem.specs_ids.findIndex(id=>!id)
            if(empty != -1) return this.counter = ''
            let result = this.cartList.find(n => n.operation_id == this.currItem.currSpecs.id)
            this.counter = result ? result : ''
        }
    },
    onLoad(e){
        if(e.tid) this.tid = e.tid
        if(e.fromShare) this.fromShare = e.fromShare
        this.contentBox = this.System.screenHeight - this.System.safeAreaInsets.bottom
        const postion = uni.upx2px(120)
        const Mtop = uni.upx2px(20)
        this.scrollView = this.contentBox - postion - this.totalHeight - Mtop
        this.$showLoading('')   
        // 优先显示缓存
        const result = uni.getStorageSync('tableData')
        if(result){
            this.pageData = result
            this.$hideLoading()
        }   
    },
    onShow(){
        if(!this.flag) return
        this.topCategory()
        this.getCart()
        this.getTableInfo()
    },
    methods: {
        getTableInfo(){
            this.$http.post({
                url: '/singleSaleApi/getTableInfo',
                data: {
                    tid: this.tid
                }
            }).then(res=>{
                if(res.errcode != 100) return
                this.tableInfo = res.data
                let {order_id, pay_mode} = res.data
                this.order_id = order_id
                // 1为拼桌(独立)、2为同桌(合并)
                if(pay_mode == 2 && !this.timer){
                    console.log('开启1')
                    this.timer = setInterval(()=>{
                        this.topCategory()
                        this.getCart()
                        this.getTableInfo()
                    }, 3000)
                }
            })
        },
        topCategory(){
            this.$http.post({
                url: '/singleSaleApi/allUpList',
                data: {
                    mode: 1,
                    getGpec: 1, // 带规格
                    tid: this.tid
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.pageData = res.data || []
                uni.setStorageSync('tableData', this.pageData)
                if(res.storeInfo) this.storeInfo = res.storeInfo
                setTimeout(()=>{
                    let OneTop = 0
                    this.pageData.forEach((item, index)=>{
                        this.$getViewInfo(`#Right${index}`).then(data=>{
                            if(!data) return
                            if(data.id == 'Right0')  OneTop = data.top
                            item.Top = parseInt(data.top) - OneTop
                        })
                    })
                    this.$hideLoading()
                }, 1000)
            })
        },
        getCart(){
            this.$http.post({
                url: '/zzj_singleSaleApi/cartList',
                data: {
                    tid: this.tid
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.cartList = res.data || []
            })
        },
        cartToTable(){ // 扫码前加入购物车
            if(!this.cartList.length) return
            this.$http.post({
                url: '/singleSaleApi/editCartTable',
                data: {
                    car_id: this.cartList.map(item=>item.car_id).join(),
                    tid: this.tid
                }
            }).then(res=>{
                console.log(res)
            })
        },
        settlement(){
            if(!this.vid) return this.showModal = true
            // 扫码
            if(!this.tid){
                let that = this
                that.flag = false
                uni.scanCode({
                    success(res){ // 真机会自动解码
                        console.log(res)
                        let path = decodeURIComponent(res.path)
                        that.tid = path.split('tid=')[1]
                        if(that.tid){
                            that.getTableInfo()
                            that.cartToTable()
                            that.topCategory()
                            that.getCart()
                        }
                        // that.toUrl('/' + res.path.replace('scene=p', 'pageType'))
                    },
                    complete(){
                        that.flag = true
                    }
                })
                return
            }
            // 结算
            if(!this.allNum) return
            let car_ids = []
            this.cartList.forEach(item=>{
                car_ids.push(item.car_id)
            })
            if(!car_ids.length) return
            // 把数组中的所有元素转换为一个字符串
            this.toUrl(`/otherPage/custom/submitOrder?car_id=${car_ids.join()}&order_id=${this.order_id}&tid=${this.tid}&pay_mode=${this.tableInfo.pay_mode}`)
        },
        clearCart(){ // 清空购物车
            if(!this.vid) return this.showModal = true
            this.$Modal('提示','确定不要了吗？').then(res=>{
                if(!res) return
                this.$http.post({
                    url: '/zzj_singleSaleApi/emptyMyCart',
                    data: {
                        tid: this.tid
                    }
                }).then(res=>{
                    if(res.errcode != 100) return this.$Toast(res.msg)
                    this.getCart()
                    this.topCategory()
                })
            })
        },
        actionItem(e, item){
            const index = this.cartList.findIndex(n => n.car_id == item.car_id)
            this.delCart(item.car_id, index)
        },
        delBtn(car_id){
            const index = this.cartList.findIndex(n => n.car_id == car_id)
            if(this.cartList[index].num > 1){
                this.cartList[index].num --
                this.incCart(car_id, this.cartList[index].num)
                return
            }
            this.delCart(car_id, index)
        },
        delCart(car_id, index){ // 某商品移出购物车
            if(!this.vid) return this.showModal = true
            this.$http.post({
                url: '/zzj_singleSaleApi/delCart',
                data: {
                    car_id,
                    tid: this.tid
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.cartList.splice(index,1)
                this.topCategory()
            })
        },
        handleDel(item){
            console.log(item)
            let cars = this.cartList.filter(n => n.goods_id == item.goods_id)
            if(cars.length == 1) return this.delBtn(cars[0].car_id)
            this.$Toast('不同规格的商品需在购物车中减购')
            this.showCartList = true
        },
        incCart(car_id, num){ // 改变某商品加购数量
            if(!this.vid) return this.showModal = true
            this.$http.post({
                url: '/zzj_singleSaleApi/incCart',
                data: {
                    car_id,
                    num,
                    tid: this.tid
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.topCategory()
            })
        },
        addBtn(car_id){
            const index = this.cartList.findIndex(n => n.car_id == car_id)
            this.cartList[index].num ++
            this.incCart(car_id, this.cartList[index].num)
        },
        handleAdd(item){
            console.log(item)
            if(item.stock == 0) return this.$Toast('库存不足')
            let { specsList, specsPrice } = item.getGoodsSpecs
            if(specsList){ // 有规格
                this.currItem = item
                let first = specsPrice.find(n => n.stock && n.stock != 0)
                if(first){
                    let specs_ids = []
                    specsList.forEach((item,index)=>{
                        let obj = item.list.find(itm=>first.specs_ids.includes(itm.specs_id))
                        specs_ids[index] = obj ? obj.specs_id : ''
                    })
                    this.currItem = {...item, currSpecs: first, specs_ids}
                }else {
                    this.currItem = item
                }
                this.specsCopy = JSON.stringify(specsList)
                this.showPopup = true
            }else { // 为null则无规格
                if(item.carNum > 0) { // 已在购物车
                    const { car_id } = this.cartList.find(n => n.goods_id == item.goods_id)
                    this.addBtn(car_id)      
                }else { // 未被加购
                    this.joinCart(item)
                }
            }
        },
        joinCart(item){
            if(!this.vid) return this.showModal = true
            this.$http.post({
                url: '/zzj_singleSaleApi/joinCart',
                data: {
                    num: 1,
                    specs_bind_id: item.currSpecs ? item.currSpecs.id : '',
                    specs_bind_text: item.currSpecs ? item.currSpecs.specs_title : '',
                    goods_id: item.goods_id,
                    shop_id: item.store_id,
                    tid: this.tid
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.getCart()
                this.topCategory()
            })
        },
        handleSpecs(index,itmState,id){ // 类别索引,规格状态,规格id
            let ids = JSON.parse(JSON.stringify(this.currItem.specs_ids))
            if(!itmState) return // 禁选
            if(ids[index] == id) return // 已选
            
            let { specsList, specsPrice } = this.currItem.getGoodsSpecs
            ids[index] = id
            let empty = ids.filter(id=>!id)

            if(!empty.length){ // 已选完
                let up = ids.slice().sort((a,b)=>a-b)
                let current = specsPrice.find(n => n.specs_ids == up.toString())
                if(current){
                    this.currItem.specs_ids = ids // 更新视图
                    this.currItem.currSpecs = current
                    // 当前所选类别有无禁选规格，无则还原list
                    let result = specsList[index].list.find(item=>!item.state)
                    if(!result) this.currItem.getGoodsSpecs.specsList = JSON.parse(this.specsCopy)
                } else{ // 没找到为undefined
                    this.currItem.specs_ids = ids.map(n => n == id ? id : '') // 只保留当前所选规格，其余类别规格id清空
                }
            } else if(empty.length == 1){ // 仅剩一个类别未选，需判断该类别有无禁选规格
                this.currItem.specs_ids = ids
                // 未选类别索引
                let i = ids.findIndex(id=>!id)
                specsList[i].list.forEach(item=>{
                    let arr = JSON.parse(JSON.stringify(ids))
                    arr[i] = item.specs_id // 每一项规格组合
                    let result = specsPrice.find(itm=>itm.specs_ids == arr.sort((a,b)=>a-b).toString())
                    item.state = result ? true : false
                })
            } else {
                this.currItem.specs_ids = ids
            }
        },
        handleSubmit(){
            let empty = this.currItem.specs_ids.findIndex(id=>!id)
            if(empty != -1) return this.$Toast('请选择规格')
            this.joinCart(this.currItem)
            this.showPopup = false
        },
        navTab(index){
            this.LeftIndex = index
            this.scrollTop = this.pageData[index].Top
        },
        RightScroll(e){
            const scrollTop = e.detail.scrollTop
            for(let i = 0; i < this.pageData.length; i++) {
                if(scrollTop >= this.pageData[i].Top){
                    this.LeftIndex = i
                }
            }
        },
        toOrderDetail(){
            if(this.order_id == 0) return this.$Toast('当前暂无待支付的订单')
            this.toUrl('/otherPage/custom/viewOrder?order_id=' + this.order_id + '&tid=' + this.tid)
        },
        handleCall(){
            if(!this.vid) return this.showModal = true
            this.$http.post({
                url: '/singleSaleApi/tableCallService',
                data: {
                    tid: this.tid
                }
            }).then(res=>{
                this.$Toast(res.msg)
            })
        },
        clearTimer(){
            if(this.timer){
                clearInterval(this.timer)
                this.timer = null
            }
            setTimeout(()=>{
                console.log('3秒后')
                if(this.timer){
                    clearInterval(this.timer)
                    this.timer = null
                }
            },3000)
        }
    },
    onHide(){ // 页面隐藏
        this.clearTimer()
    },
    onUnload(){ // 页面卸载
        this.clearTimer()
    }
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100vh;
}
.topBg {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.fcBtn {
    width: 160rpx;
    height: 64rpx;
    border-radius: 32rpx;
    border: 1rpx solid #dadbde;
}
.position {
    height: 120rpx;
    .logo {
        width: 40rpx;
        height: 40rpx;
    }
}
.way .iconfont {
    color: var(--color);
}
.scrollView {
    width: 100%;
    .Left {
		width: 150rpx;
		overflow: hidden;
        .leftList {
            height: 70rpx;
            line-height: 70rpx;
            padding-left: 20rpx;
            margin-top: 10rpx;
            &.navActive {
                background-color: #e5e5e5;
                border-radius: 0 35rpx 35rpx 0;
                font-weight: bold;
                color: #333333;
                position: relative;
                &::after {
                    content: '';
		            width: 26rpx;
                    height: 26rpx;
                    border-radius: 50%;
                    background-color: var(--color);
                    position: absolute;
                    left: -18rpx;
                    top: 50%;
                    transform: translate(0, -50%);
                }
            }
        }
	}
    .Right {
        border-radius: 20rpx 20rpx 0 0;
        overflow: hidden;
        box-sizing: border-box;
        .RightData, .Top_bg {
            width: 100%;
            border-radius: 20rpx 20rpx 0 0;
            overflow: hidden;
        }
        .list:last-child {
            padding-bottom: 10rpx;
        }
    }
    .botBox {
        height: 160rpx;
    }
    .shop_img {
        width: 180rpx;
        height: 180rpx;
    }
}
.CartView {
    width: 690rpx;
    height: 86rpx;
    border-radius: 43rpx;
    overflow: hidden;
    left: 30rpx;
    bottom: 30rpx;
    z-index: 300;
    box-shadow: 0rpx 6rpx 20rpx #fee0e3;
    .Cartnum {
        width: 30rpx;
		height: 30rpx;
		background-color: var(--color);
		border-radius: 50%;
		top: -12rpx;
		right: -12rpx;
    }
}
.CartBtn {
    width: 360rpx;
    height: 86rpx;
    border-radius: 43rpx;
    overflow: hidden;
    left: 50%;
    bottom: 30rpx;
    margin-left: -180rpx;
    z-index: 300;
    box-shadow: 0rpx 6rpx 20rpx #fee0e3;
}
.Settle {
    background: var(--color);
}
.Controls {
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    .botPop {
        padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
    }
    .swipe-action {
		max-height: 50vh;
		overflow-x: hidden;
		overflow-y: auto;
	}
    .shop_img {
        width: 140rpx;
        height: 140rpx;
    }
}
.amount {
    width: 60rpx;
}
.icon-jianshao1, .icon-zengjia {
    color: var(--color);
}
.specsPop {
    min-height: 50vh;
    max-height: 70vh;
    .list {
        overflow-x: hidden;
        overflow-y: auto;
    }
    .specsTag {
        min-width: 144rpx;
        line-height: 54rpx;
        padding: 0 10rpx;
        background: #F4F4F4;
        margin: 0 20rpx 20rpx 0;
        &.active {
            background: var(--color);
            color: white;
        }
    }
    .line {
        background: #fafafa;
        border: 2rpx solid #f0f0f0;
    }
    .footer {
        height: 160rpx;
    }
    .botBtn {
        width: 200rpx;
        height: 60rpx;
        background: var(--color);
    }
}
</style>